<script setup>
import { watch, ref } from 'vue';

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 1
  }
})
const current = ref(0)
watch(() => props.modelValue, val => {
  current.value = val
}, { immediate: true })
const currentChange = e => {
  emits('update:modelValue', e)
}
</script>

<template>
  <div class="my-pagination">
    <a-pagination class="fenye" v-model:current="current" :total="props.total" showLessItems :showSizeChanger="false"
      @change="currentChange" />
  </div>
</template>

<style>
.my-pagination {
  * {
    color: #fff !important;
  }

  .ant-pagination-item-active {
    background-color: rgba(74, 105, 114, 0.755);
  }
}
</style>

<style scoped lang="scss">
.my-pagination {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  height: 50px;

  .fenye {
    transform: scale(1.5);
    transform-origin: right top;
  }
}
</style>